(function() {
  var Cropper = Class.create({
    constructor: function(ele) {
      this.ele = ele; //jquery对象
      this.dom = ele.get(0);
      this.init();
    },
    init: function() {
      var html =
        '<input type="file" id="uploadFile"></input>' +
        '<div id="previewWrapper">' +
        '<img id="preview"></img>' +
        "</div>" +
        '<button id="btnZoomOut">放大</button> <button id="btnZoomIn">缩小</button> <button id="btnTransX">x方向平移</button>' +
        '<button id="btnTransY">y方向平移</button> ' +
        '<button id="btnTransXInverse">x方向平移(负方向)</button>' +
        '<button id="btnTransYInverse">y方向平移(负方向)</button>' +
        '<button id="btnRotate">顺时针旋转</button> <button id="btnRotateInverse">逆时针旋转</button>';

      this.ele.append($(html));
      //给所有的事件，添加一个你自定义命名空间
      $("#uploadFile").on("change.fi", function(e) {
        var f = $("#uploadFile").get(0).files[0];
        var url = window.URL.createObjectURL(f); //通过blob对象生成一个临时的url
        $("#preview").attr("src", url);
        $("#preview").on("load.fi", function(e) {
          var width = this.width;
          var height = this.height;
          var cWidth = this.width / 3;
          var cHeight = this.height / 3;
          var jCanvas = $("<canvas></canvas>");
          jCanvas.insertAfter($("#preview"));
          jCanvas.attr("width", this.width);
          jCanvas.attr("height", this.height);
          var ctx = jCanvas.get(0).getContext("2d"); //jCanvas.getContext("2d");
          var drawRect = function() {
            ctx.save();
            //ctx.translate(width / 2, height / 2)
            ctx.beginPath();
            //ctx.rect(-width / 2, -height / 2, width, height);
            var bx = -cWidth / 2;
            var by = -cHeight / 2;
            //  ctx.rect(width/2-cWidth/2,height/2-cHeight/2,cWidth,cHeight)
            //零和原则
            ctx.moveTo(bx, by);
            ctx.lineTo(bx, by + cHeight);
            ctx.lineTo(bx + cWidth, by + cHeight);
            ctx.lineTo(bx + cWidth, by);
            ctx.lineTo(bx, by);
            ctx.fillStyle = "rgba(0,0,0,0.5)";
            ctx.fill();
            ctx.restore();
          };

          var m = new Matrix();
          ctx.translate(width / 2, height / 2);
          drawRect();
          $("#btnZoomOut").on("click.fi", function(e) {
            ctx.clearRect(-width / 2, -height / 2, width, height);
            ctx.save();
            m.scale(1.1, 1.1);
            ctx.transform(m.a, m.b, m.c, m.d, m.tx, m.ty);
            drawRect();
            ctx.restore();
          });

          $("#btnZoomIn").on("click.fi", function(e) {
            ctx.clearRect(-width / 2, -height / 2, width, height);
            ctx.save();
            m.scale(0.9, 0.9);
            ctx.transform(m.a, m.b, m.c, m.d, m.tx, m.ty);
            drawRect();
            ctx.restore();
          });

          $("#btnTransX").on("click.fi", function(e) {
            ctx.clearRect(-width / 2, -height / 2, width, height);
            ctx.save();
            m.translate(10, 0);
            ctx.transform(m.a, m.b, m.c, m.d, m.tx, m.ty);
            drawRect();
            ctx.restore();
          });

          $("#btnTransY").on("click.fi", function(e) {
            ctx.clearRect(-width / 2, -height / 2, width, height);
            ctx.save();
            m.translate(0, 10);
            ctx.transform(m.a, m.b, m.c, m.d, m.tx, m.ty);
            drawRect();
            ctx.restore();
          });

          $("#btnTransXInverse").on("click.fi", function(e) {
            ctx.clearRect(-width / 2, -height / 2, width, height);
            ctx.save();
            m.translate(-10, 0);
            ctx.transform(m.a, m.b, m.c, m.d, m.tx, m.ty);
            drawRect();
            ctx.restore();
          });

          $("#btnTransYInverse").on("click.fi", function(e) {
            ctx.clearRect(-width / 2, -height / 2, width, height);
            ctx.save();
            m.translate(0, -10);
            ctx.transform(m.a, m.b, m.c, m.d, m.tx, m.ty);
            drawRect();
            ctx.restore();
          });

          $("#btnRotate").on("click.fi", function(e) {
            ctx.clearRect(-width / 2, -height / 2, width, height);
            ctx.save();
            m.rotate(Math.PI * 0.1);
            ctx.transform(m.a, m.b, m.c, m.d, m.tx, m.ty);
            drawRect();
            ctx.restore();
          });

          $("#btnRotateInverse").on("click.fi", function(e) {
            ctx.clearRect(-width / 2, -height / 2, width, height);
            ctx.save();
            m.rotate(-Math.PI * 0.1);
            ctx.transform(m.a, m.b, m.c, m.d, m.tx, m.ty);
            drawRect();
            ctx.restore();
          });
        });
      });
    }
  });

  var plugin = function() {
    //这个元素已经应用了cropper
    //this指针指向jquery对象
    if (this.data("cropper")) {
      return;
    }
    var cropper = new Cropper(this);
    this.data("cropper", cropper);
  };

  $.fn.cropper = plugin;
})();
